<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-nested.tld" prefix="nested" %>
<html:html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title></title>
        <style type="text/css" >
		#info{
		position:absolute;
		display:none;
		background-color:#FFFFFF;
		border:1px solid #006699;
		text-align:center;
		font-size:13px;
		width:100px;
		padding:15px 10px;
		FILTER: alpha(Opacity=90);
		}
		#chartDiv{
		position:absolute;
		display:none;
		background-color:#FFFFFF;
		border:1px solid #006699;
		text-align:center;
		font-size:13px;
		width:400px;
		heigh:350px;
		padding:15px 10px;
		FILTER: alpha(Opacity=0);
		}
		.testClose{
		position:absolute;
		width:15px;
		height:15px;
		border:1px solid #006699;
		left:390px;
		top:10px;
		margin:auto;
		text-align:center;
		cursor:pointer;
		}
		</style>
        <script language="javascript" src="/js/json2.js"></script>
		<script language="javascript" src="/js/litpen_ajax.js"></script>
        <script language="javascript" src="/js/yahoo.js"></script>
		<script language="javascript" src="/js/yahoo_event.js"></script>
		<script language="javascript" src="/js/yahoo_dom.js"></script>
		<script language="javascript" src="/js/yahoo_calendar.js"></script>
		<link type="text/css" rel="stylesheet" href="/assets/calendar.css">
		<link rel="stylesheet" type="text/css" href="/assets/dpSyntaxHighlighter.css" />
        <script language="javascript" type="text/javascript">
        //<![CDATA[
			<!-- 翻页function -->
			
			function gotoPage(url){
				//alert(url);
				checkByDate1(url);
			}
			
			<!--  -->
			function checkByCardNum(){
				var form = document.forms['cardNumForm'];
				show_info();
				var check_ajax = new Ajax(form.action,formToRequestString(form),true,checkByCardNumCallback,"post");
				check_ajax.send();
			}
			
			function checkByCardNumCallback(){
				hide_info();
				var result = arguments[0];

				if (check_error(result)){
					var error = result.split(":");
					alert(error[1]);
					return;
				}

				var myData = JSON.parse(result,null);

				var oTBody = document.getElementById("cardBody");
				while (oTBody.hasChildNodes()){
					oTBody.removeChild(oTBody.firstChild);
				}
				
				var oRow = document.createElement("TR");
				oRow.setAttribute("align","center");
				oTBody.appendChild(oRow);
					//
				oCell = document.createElement("TD");
				oCell.innerText = myData.cardNo;
				oRow.appendChild(oCell);
					
				oCell = document.createElement("TD");
				oCell.innerText = "暂无资料";
				oRow.appendChild(oCell);
					
				oCell = document.createElement("TD");
				oCell.innerText = myData.used == false ? "否" : "是";
				oRow.appendChild(oCell);
					
				oCell = document.createElement("TD");
				oCell.innerText = myData.expiry == false ? "否" : "是";
				oRow.appendChild(oCell);
					
				oCell = document.createElement("TD");
				oCell.innerText = myData.cardValue;
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = "暂无资料";
				oRow.appendChild(oCell);
				
				oCell = document.createElement("TD");
				oCell.innerText = myData.useFor == "" ? "" : myData.useFor;
				oRow.appendChild(oCell);
			
				document.getElementById("pageStr").innerHTML="";
			}
			
			function checkByDate1(url){
				show_info();
				var check_ajax = new Ajax(url,null,true,checkByDateCallback,"get");
				check_ajax.send();
			}
			
			function checkByDate(){
				var form = document.forms['dateForm'];
				show_info();
				var check_ajax = new Ajax(form.action,formToRequestString(form),true,checkByDateCallback,"post");
				check_ajax.send();
			}
			
			function checkByDateCallback(){
				hide_info();
				var result = arguments[0];
				
				if (check_error(result)){
					var error = result.split(":");
					alert(error[1]);
					return;
				}
				
				var myData = JSON.parse(result,null);
				var cardList = JSON.parse(myData.cardList,null);
				if (myData.chartDataset != null && myData.chartDataset != ""){
					var chart_action = "/chart/pieChartGen.do?" + "dataset=" + myData.chartDataset;
					var chart_ajax = new Ajax(chart_action,null,true,chartCallback,"get");
					chart_ajax.send();
				}
				
				var oTBody = document.getElementById("cardBody");
				while (oTBody.hasChildNodes()){
					oTBody.removeChild(oTBody.firstChild);
				}
				
				for (var i = 0; i< cardList.list.length;i++){
					//alert(cardList.list[0].cardNo);	
					oRow = document.createElement("TR");
					oRow.setAttribute("align","center");
					oTBody.appendChild(oRow);
					//
					oCell = document.createElement("TD");
					oCell.innerText = cardList.list[i].cardNo;
					oRow.appendChild(oCell);
					
					oCell = document.createElement("TD");
					oCell.innerText = cardList.list[i].usedTime;
					oRow.appendChild(oCell);
					
					oCell = document.createElement("TD");
					oCell.innerText = cardList.list[i].used = "是";
					oRow.appendChild(oCell);
					
					oCell = document.createElement("TD");
					oCell.innerText = cardList.list[i].expiry == false ? "否" : "是";
					oRow.appendChild(oCell);
					
					oCell = document.createElement("TD");
					oCell.innerText = cardList.list[i].cardValue;
					oRow.appendChild(oCell);
					
					oCell = document.createElement("TD");
					oCell.innerText = cardList.list[i].useIp;
					oRow.appendChild(oCell);
					
					oCell = document.createElement("TD");
					oCell.innerText = cardList.list[i].useFor;
					oRow.appendChild(oCell);
					
				}
				
				document.getElementById("pageStr").innerHTML=myData.pageStr;
			}
			
			function chartCallback(){
				var result = arguments[0];
				if(result == "")
					return;
				var start = result.indexOf("<fileName>") + 10;
				var end = result.indexOf("</fileName>");
				var fileName = result.substring(start,end);
				var body = document.getElementById("chartDiv");
				body.innerHTML = "";
				var img = document.createElement("img");
				img.setAttribute("src","/servlet/DisplayChart?filename=" + fileName);
				body.appendChild(img);
				var closeDiv = document.createElement("div");
				closeDiv.innerHTML = "<span title='关闭(close)'>X</span>";
				closeDiv.className = "testClose";
				//closeDiv.style.left = body.style.width;
				//closeDiv.style.top = 0;
				EventUtil.addEventHandler(closeDiv,"click",hideChart);
				body.appendChild(closeDiv);
				//showChart();
			}
			
			function check_error(str){
				if (str.indexOf("errors") != -1)
					return true;
				return false;
			}
			
			function show_info(){
				var moveDiv = document.getElementById("info");
				
				moveDiv.style.left = document.body.clientWidth / 2 - 200/2;
				
				moveDiv.style.top = document.body.clientHeight / 2 - 50/2;
				moveDiv.style.display = "block";
			}
			
			function hide_info(){
				var moveDiv = document.getElementById("info");
				moveDiv.style.display = "none";
			}
			
			//统计图js部分
			var timerId = null;
			function showChart(){
				//移动div居中
				var moveDiv = document.getElementById("chartDiv");
				
				moveDiv.style.left = document.body.clientWidth / 2 - 400/2;
				
				moveDiv.style.top = document.body.clientHeight / 2 - 350/2;
				moveDiv.style.display = "block";
				timerId = setInterval("showChartInt('chartDiv')",20);
				
				
			}
			
			function showChartInt(id){
				var divc = document.getElementById(id);
				divc.filters.alpha.opacity += 10;
				if (timerId != null && divc.filters.alpha.opacity >= 100)
				{
					clearInterval(timerId);
					timerId = null;
				}
			}
			
			function hideChart(){
				timerId = setInterval("hideChartInt('chartDiv')",20);
				var moveDiv = document.getElementById("chartDiv");
				
			}
			function hideChartInt(id){
				var divc = document.getElementById(id);
				divc.filters.alpha.opacity -= 10;
				if (timerId != null && divc.filters.alpha.opacity <= 0)
				{
					divc.style.display = "none";
					clearInterval(timerId);
					timerId = null;
				}
			}
			
			//yahoo date widget code begin
			var cal1;
			var call2;
			function init() {
				cal1 = new YAHOO.widget.Calendar2up("cal1","containerDate1");
				cal1.setChildFunction("onSelect",setDate1);
				cal1.render();
				
				cal2 = new YAHOO.widget.Calendar2up("cal2","containerDate2");
				cal2.setChildFunction("onSelect",setDate2);
				cal2.render();
			}
			
			function setDate1() {
						var date1 = cal1.getSelectedDates()[0];
						var date = date1.getYear() + "-" + (date1.getMonth()+1) + "-" + date1.getDate();
						dateForm.startDate.value= date;		
						cal1.hide();
			}
			
			function setDate2() {
						var date2 = cal2.getSelectedDates()[0];
						var date = date2.getYear() + "-" + (date2.getMonth()+1) + "-" + date2.getDate();
						dateForm.endDate.value= date;		
						cal2.hide();
			}
			
			function show1(){
				var link1 = document.getElementById('dateLink1');
				var pos = YAHOO.util.Dom.getXY(link1);
				cal1.outerContainer.style.display='block';
				YAHOO.util.Dom.setXY(cal1.outerContainer, [pos[0],pos[1]+link1.offsetHeight+1]);
			}
			
			function show2(){
				var link2 = document.getElementById('dateLink2');
				var pos = YAHOO.util.Dom.getXY(link2);
				cal2.outerContainer.style.display='block';
				YAHOO.util.Dom.setXY(cal2.outerContainer, [pos[0],pos[1]+link2.offsetHeight+1]);
			}
			YAHOO.util.Event.addListener(window, "load", init);
		//]]>
        </script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<div style="width:95%; margin: auto;" ref="012">	
<div id="TabbedPanels1" class="TabbedPanels">
		  <ul class="TabbedPanelsTabGroup">
		    <li class="TabbedPanelsTab" tabindex="0">按卡号查询</li>
		    <li class="TabbedPanelsTab" tabindex="0">按时间段查询</li>
	      </ul>
		  <div class="TabbedPanelsContentGroup">
		    <div class="TabbedPanelsContent">
            	<form action="/wow/searchWowCard.do" method="post" name="cardNumForm">
           	  	  <label for="cardNo">卡号：</label><input type="text" name="cardNo" >
                  <input type="button" onClick="checkByCardNum();" value="确定">
                </form>
            </div>
		    <div class="TabbedPanelsContent">
            	<form action="/wow/searchWowCard.do" method="post" name="dateForm">
       	  	    <input type="hidden" name="photo" value="true">
       	  	    <label for="startDate">起始时间：</label><input type="text" name="startDate" size="10" >&nbsp;&nbsp;<a href="javascript:void(0);" onclick="show1();"><img id="dateLink1" src="/images/pdate.gif" border="0" /></a>
                    <label for="endDate">结束时间：</label><input type="text" name="endDate" size="10" >&nbsp;&nbsp;<a href="javascript:void(0);" onclick="show2();"><img id="dateLink2" src="/images/pdate.gif" border="0" /></a><!--  <span>高级选项：</span>-->&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="cardValue">金额：</label><input type="text" name="cardValue" size="5">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<label for="useFor">用途：</label><input type="radio" name="useFor" value="ub">优币 <input type="radio" name="useFor" value="gold">金币 <input type="radio" name="useFor" value="(gold|ub)">全部
                  <input type="button" onClick="checkByDate();" value="查找"> <input type="button" onClick="showChart();" value="显示图表">
                </form>
            </div>
	      </div>
    </div>
	    
        
    <script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
    </script>
    
    	<div style="clear:both"/>
    </div>
    <div style="margin:10px auto"/>
    <div id="resultPanel">
    	<TABLE width="95%" align="center" cellpadding="2" cellspacing="1" bgcolor="#FFFFFF" style="border:1px solid #56626d;font-size:12px">
        	<thead>
            	<tr style="background-color:#46525d; color:#FFFFFF">
                	<th>卡号</th>
                    <th>使用时间</th>
                    <th>已使用？</th>
                    <th>过期？</th>
                    <th>面值</th>
                    <th>使用IP</th>
                    <th>用于</th>
                </tr>
            </thead>
            <tbody id="cardBody">
            	
            </tbody>
        </table>
        
        <div id="pageStr"></div>
    </div>
    <div id="info">查询中......</div>
    <div id="chartDiv"></div>
    <div id="containerDate1" style="position:absolute;display:none"></div>
	<div id="containerDate2" style="position:absolute;display:none"></div>
	</body>
</html:html>
